<template>
  <div id="module">
    <el-container>
      <!-- 导航菜单 -->
      <NavMenu />
      <el-container>
        <!-- 右侧头部 -->
        <el-header>
          <!-- 面包屑导航 -->
          <Breadcrumb />
          <!-- 中心标题 -->
          <div style="display: inline-block; text-align: center; width: 80%; font-size: 24px; font-family: 'Microsoft YaHei'; font-weight: bolder;">
            <p>后 台 管 理 系 统</p>
          </div>
          <div v-if="mainStore().$state.accountInfo" style="display: inline-block; float: right;">

            <el-popover placement="bottom" :width="100" trigger="click">
              <template #reference>
                <!-- 头像 -->
                <el-image style="width: 33px; height: 33px; padding: 15px;"
                  :src="imageUrlFilter(mainStore().$state.accountInfo.avatar)" :fit="fit">
                  <template #error>
                    <div class="image-slot">
                      <img src="../../assets/img/avatar.png" alt="" style="width: 100%;">
                    </div>
                  </template>
                </el-image>
              </template>
              <div>
                <!-- 用户名 -->
                <p>
                  <el-tooltip class="box-item" effect="dark" content="用户名" placement="top-start">
                    {{ mainStore().$state.accountInfo.userName }}
                  </el-tooltip>
                </p>
                <!-- 上次登录时间 -->
                <p>
                  <el-tooltip class="box-item" effect="dark" content="上次登录日期" placement="top-start">
                    {{ mainStore().$state.accountInfo.lastLoginTime }}
                  </el-tooltip>
                </p>
              </div>
              <!-- 分隔符 -->
              <el-divider style="margin-bottom: 5px !important; margin-top: 5px !important;" />
              <div>
                <!-- 退出 -->
                <el-button type="primary" link @click.prevent="exit()">退出登录</el-button>
              </div>
            </el-popover>
          </div>
        </el-header>
        <!-- 右侧主体 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import NavMenu from './navMenu.vue';
import Breadcrumb from './breadcrumb.vue'
import mainStore from "@/store/index";
import { useRouter } from "vue-router";
import { defUrl } from '@/api/index'
import { Picture as IconPicture } from '@element-plus/icons-vue'

const router = useRouter();

const loginTimeFilter = computed(() => item => {
  if (!item) {
    return "";
  }

  let str = item.toString();
  let index = str.indexOf('T');

  return str.subString(0, index);
});

const exit = () => {
  mainStore().$patch({
    accountInfo: null,
    accessToken: null,
    refreshToken: null,
    menuList: [],
    buttons: []
  });

  router.push('/login');
}

const imageUrlFilter = computed(() => item => {
  return `${defUrl}${item}`
})
</script>

<style scoped>
.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>